
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">DropzoneJs</h3>
					    </div>
					    <div class="panel-body">
					        <p class="text-main text-bold mar-no">Drag’n’drop file uploads</p>
					        <p>DropzoneJs provides drag’n’drop file uploads with image previews.</p>
					
					        <br>
					
					          <!--Dropzonejs-->
					        <!--===================================================-->
					        <form id="demo-dropzone" action="#" class="dropzone">
					            <div class="dz-default dz-message">
					                <div class="dz-icon">
					                    <i class="demo-pli-upload-to-cloud icon-5x"></i>
					                </div>
					                <div>
					                    <span class="dz-text">Drop files to upload</span>
					                    <p class="text-sm text-muted">or click to pick manually</p>
					                </div>
					            </div>
					            <div class="fallback">
					                <input name="file" type="file" multiple>
					            </div>
					        </form>
					        <!--===================================================-->
					        <!-- End Dropzonejs -->
					
					    </div>
					</div>
					
					<div class="panel">
					    <div class="panel-heading">
					        <h3 class="panel-title">Bootstrap theme</h3>
					    </div>
					    <div class="panel-body">
					
					        <!--Dropzonejs using Bootstrap theme-->
					        <!--===================================================-->
					        <p>This is a bootstrap theme of Dropzone.js with a completely different user experience.</p>
					
					        <div class="bord-top pad-ver">
					            <!-- The fileinput-button span is used to style the file input field as button -->
					            <span class="btn btn-success fileinput-button dz-clickable">
					                <i class="fa fa-plus"></i>
					                <span>Add files...</span>
					            </span>
					
					            <div class="btn-group pull-right">
					                <button id="dz-upload-btn" class="btn btn-primary" type="submit" disabled>
					                    <i class="fa fa-upload-cloud"></i> Upload
					                </button>
					                <button id="dz-remove-btn" class="btn btn-danger cancel" type="reset" disabled>
					                    <i class="demo-pli-cross"></i>
					                </button>
					            </div>
					        </div>
					
					
					        <div id="dz-previews">
					            <div id="dz-template" class="pad-top bord-top">
					                <div class="media">
					                    <div class="media-body">
					                         <!--This is used as the file preview template-->
					                        <div class="media-block">
					                            <div class="media-left">
					                                <img class="dz-img" data-dz-thumbnail>
					                            </div>
					                            <div class="media-body">
					                                <p class="text-main text-bold mar-no text-overflow" data-dz-name></p>
					                                <span class="dz-error text-danger text-sm" data-dz-errormessage></span>
					                                <p class="text-sm" data-dz-size></p>
					                                <div id="dz-total-progress" style="opacity:0">
					                                     <div class="progress progress-xs active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
					                                        <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
					                                    </div>
					                                </div>
					                            </div>
					                        </div>
					                    </div>
					                    <div class="media-right">
					                        <button data-dz-remove class="btn btn-xs btn-danger dz-cancel"><i class="demo-pli-cross"></i></button>
					                    </div>
					                </div>
					            </div>
					        </div>
					        <!--===================================================-->
					        <!--End Dropzonejs using Bootstrap theme-->
					
					
					    </div>
					</div>
					<script>
					
					
					
					</script>
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
<script>

//Form-File-Upload.js
//====================================================================
//This file should not be included in your project.
//This is just a sample how to initialize plugins or components.
//
//- ThemeOn.net -


$(document).ready(function() {

 // DROPZONE.JS
 // =================================================================
 // Require Dropzone
 // http://www.dropzonejs.com/
 // =================================================================
 Dropzone.options.demoDropzone = { // The camelized version of the ID of the form element
     // The configuration we've talked about above
     autoProcessQueue: false,
     //uploadMultiple: true,
     //parallelUploads: 25,
     //maxFiles: 25,

     // The setting up of the dropzone
     init: function() {
     var myDropzone = this;
     //  Here's the change from enyo's tutorial...
     //  $("#submit-all").click(function (e) {
     //  e.preventDefault();
     //  e.stopPropagation();
     //  myDropzone.processQueue();
         //
     //}
     //    );

     }

 }



 // DROPZONE.JS WITH BOOTSTRAP'S THEME
 // =================================================================
 // Require Dropzone
 // http://www.dropzonejs.com/
 // =================================================================
 // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument
 var previewNode = document.querySelector("#dz-template");
 previewNode.id = "";
 var previewTemplate = previewNode.parentNode.innerHTML;
 previewNode.parentNode.removeChild(previewNode);

 var uplodaBtn = $('#dz-upload-btn');
 var removeBtn = $('#dz-remove-btn');
 var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
     url: "/target-url", // Set the url
     thumbnailWidth: 50,
     thumbnailHeight: 50,
     parallelUploads: 20,
     previewTemplate: previewTemplate,
     autoQueue: false, // Make sure the files aren't queued until manually added
     previewsContainer: "#dz-previews", // Define the container to display the previews
     clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
 });


 myDropzone.on("addedfile", function(file) {
     // Hookup the button
     uplodaBtn.prop('disabled', false);
     removeBtn.prop('disabled', false);
 });

 // Update the total progress bar
 myDropzone.on("totaluploadprogress", function(progress) {
     $("#dz-total-progress .progress-bar").css({'width' : progress + "%"});
 });

 myDropzone.on("sending", function(file) {
     // Show the total progress bar when upload starts
     document.querySelector("#dz-total-progress").style.opacity = "1";
 });

 // Hide the total progress bar when nothing's uploading anymore
 myDropzone.on("queuecomplete", function(progress) {
     document.querySelector("#dz-total-progress").style.opacity = "0";
 });


 // Setup the buttons for all transfers
 uplodaBtn.on('click', function() {
     //Upload all files
     //myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
 });

 removeBtn.on('click', function() {
     myDropzone.removeAllFiles(true);
     uplodaBtn.prop('disabled', true);
     removeBtn.prop('disabled', true);
 });

});

</script>